import { Button, Card, Popconfirm } from 'antd';
import Table, { ColumnsType } from 'antd/es/table';

import { IconButton, Iconify } from '@/components/icon';
import { useCommon } from '@/hooks/common';

import { RoleModal } from './role-modal';

export default function RolePage() {
  const uri = 'role';
  const cateName = '角色列表';
  const formParams: any = {
    roleKey: '',
    roleName: '',
    id: '',
    status: '0',
    roleSort: '',
    remark: '',
  };
  const {
    data = {},
    ModalPros,
    onCreate,
    onEdit,
    handleChange,
  } = useCommon({ name: '', userId: '' }, uri, { ...formParams });

  const columns: ColumnsType<any> = [
    {
      title: '编号',
      dataIndex: 'id',
      width: 60,
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      width: 60,
    },
    { title: '角色ID', dataIndex: 'roleKey', width: 60 },
    {
      title: '状态',
      dataIndex: 'status',
      width: 60,
      render: (status) => <div>{Number(status) === 0 ? '可用' : '禁用'}</div>,
    },
    { title: '备注', dataIndex: 'remark', width: 60 },
    {
      title: '操作',
      key: 'operation',
      align: 'center',
      width: 100,
      render: (_, record) => (
        <div className="flex w-full justify-center text-gray">
          <IconButton onClick={() => onEdit(record)}>
            <Iconify icon="solar:pen-bold-duotone" size={18} />
          </IconButton>
          <Popconfirm title="Delete the Role" okText="Yes" cancelText="No" placement="left">
            <IconButton>
              <Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
            </IconButton>
          </Popconfirm>
        </div>
      ),
    },
  ];

  return (
    <Card
      title={cateName}
      extra={
        <Button type="primary" onClick={() => onCreate({ ...formParams })}>
          新增
        </Button>
      }
    >
      <Table
        rowKey="id"
        size="small"
        scroll={{ x: 'max-content' }}
        pagination={{ total: data.totalCount }}
        columns={columns}
        dataSource={data.list}
        onChange={handleChange}
      />

      <RoleModal {...ModalPros} />
    </Card>
  );
}
